<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-window.Window-method-constructor'><span id='Ext-window.Window'>/**
</span></span> * @class Ext.window.Window
 * @extends Ext.panel.Panel
 * &lt;p&gt;A specialized panel intended for use as an application window.  Windows are floated, {@link #resizable}, and
 * {@link #draggable} by default.  Windows can be {@link #maximizable maximized} to fill the viewport,
 * restored to their prior size, and can be {@link #minimize}d.&lt;/p&gt;
 * &lt;p&gt;Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide
 * grouping, activation, to front, to back and other application-specific behavior.&lt;/p&gt;
 * &lt;p&gt;By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element
 * specify {@link Ext.Component#renderTo renderTo}.&lt;/p&gt;
 * &lt;p&gt;&lt;b&gt;As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window
 * to size and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out
 * child Components in the required manner.&lt;/b&gt;&lt;/p&gt;
 * {@img Ext.window.Window/Ext.window.Window.png Window component}
 * Example:&lt;code&gt;&lt;pre&gt;
Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {  // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{header: 'World'}],                 // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    }
}).show();
&lt;/pre&gt;&lt;/code&gt;
 * @constructor
 * @param {Object} config The config object
 * @xtype window
 */
Ext.define('Ext.window.Window', {
    extend: 'Ext.panel.Panel',

    alternateClassName: 'Ext.Window',

    requires: ['Ext.util.ComponentDragger', 'Ext.util.Region', 'Ext.EventManager'],

    alias: 'widget.window',

<span id='Ext-window.Window-cfg-x'>    /**
</span>     * @cfg {Number} x
     * The X position of the left edge of the window on initial showing. Defaults to centering the Window within
     * the width of the Window's container {@link Ext.core.Element Element) (The Element that the Window is rendered to).
     */
<span id='Ext-window.Window-cfg-y'>    /**
</span>     * @cfg {Number} y
     * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within
     * the height of the Window's container {@link Ext.core.Element Element) (The Element that the Window is rendered to).
     */
<span id='Ext-window.Window-cfg-modal'>    /**
</span>     * @cfg {Boolean} modal
     * True to make the window modal and mask everything behind it when displayed, false to display it without
     * restricting access to other UI elements (defaults to false).
     */
<span id='Ext-window.Window-cfg-animateTarget'>    /**
</span>     * @cfg {String/Element} animateTarget
     * Id or element from which the window should animate while opening (defaults to null with no animation).
     */
<span id='Ext-window.Window-cfg-defaultFocus'>    /**
</span>     * @cfg {String/Number/Component} defaultFocus
     * &lt;p&gt;Specifies a Component to receive focus when this Window is focused.&lt;/p&gt;
     * &lt;p&gt;This may be one of:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;The index of a footer Button.&lt;/li&gt;
     * &lt;li&gt;The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.&lt;/li&gt;
     * &lt;li&gt;A Component.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     */
<span id='Ext-window.Window-cfg-onEsc'>    /**
</span>     * @cfg {Function} onEsc
     * Allows override of the built-in processing for the escape key. Default action
     * is to close the Window (performing whatever action is specified in {@link #closeAction}.
     * To prevent the Window closing when the escape key is pressed, specify this as
     * Ext.emptyFn (See {@link Ext#emptyFn Ext.emptyFn}).
     */
<span id='Ext-window.Window-cfg-collapsed'>    /**
</span>     * @cfg {Boolean} collapsed
     * True to render the window collapsed, false to render it expanded (defaults to false). Note that if
     * {@link #expandOnShow} is true (the default) it will override the &lt;code&gt;collapsed&lt;/code&gt; config and the window
     * will always be expanded when shown.
     */
<span id='Ext-window.Window-cfg-maximized'>    /**
</span>     * @cfg {Boolean} maximized
     * True to initially display the window in a maximized state. (Defaults to false).
     */

<span id='Ext-window.Window-cfg-baseCls'>    /**
</span>    * @cfg {String} baseCls
    * The base CSS class to apply to this panel's element (defaults to 'x-window').
    */
    baseCls: Ext.baseCSSPrefix + 'window',

<span id='Ext-window.Window-cfg-resizable'>    /**
</span>     * @cfg {Mixed} resizable
     * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to allow user resizing at each edge and corner of the window, false to disable
     * resizing (defaults to true).&lt;/p&gt;
     * &lt;p&gt;This may also be specified as a config object to &lt;/p&gt;
     */
    resizable: true,

<span id='Ext-window.Window-cfg-draggable'>    /**
</span>     * @cfg {Boolean} draggable
     * &lt;p&gt;True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true).  Note
     * that by default the window will be centered in the viewport, so if dragging is disabled the window may need
     * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).&lt;p&gt;
     */
    draggable: true,

<span id='Ext-window.Window-cfg-constrain'>    /**
</span>     * @cfg {Boolean} constrain
     * True to constrain the window within its containing element, false to allow it to fall outside of its
     * containing element. By default the window will be rendered to document.body.  To render and constrain the
     * window within another element specify {@link #renderTo}.
     * (defaults to false).  Optionally the header only can be constrained using {@link #constrainHeader}.
     */
    constrain: false,

<span id='Ext-window.Window-cfg-constrainHeader'>    /**
</span>     * @cfg {Boolean} constrainHeader
     * True to constrain the window header within its containing element (allowing the window body to fall outside
     * of its containing element) or false to allow the header to fall outside its containing element (defaults to
     * false). Optionally the entire window can be constrained using {@link #constrain}.
     */
    constrainHeader: false,

<span id='Ext-window.Window-cfg-plain'>    /**
</span>     * @cfg {Boolean} plain
     * True to render the window body with a transparent background so that it will blend into the framing
     * elements, false to add a lighter background color to visually highlight the body element and separate it
     * more distinctly from the surrounding frame (defaults to false).
     */
    plain: false,

<span id='Ext-window.Window-cfg-minimizable'>    /**
</span>     * @cfg {Boolean} minimizable
     * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
     * and disallow minimizing the window (defaults to false).  Note that this button provides no implementation --
     * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a
     * custom minimize behavior implemented for this option to be useful.
     */
    minimizable: false,

<span id='Ext-window.Window-cfg-maximizable'>    /**
</span>     * @cfg {Boolean} maximizable
     * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
     * and disallow maximizing the window (defaults to false).  Note that when a window is maximized, the tool button
     * will automatically change to a 'restore' button with the appropriate behavior already built-in that will
     * restore the window to its previous size.
     */
    maximizable: false,

    // inherit docs
    minHeight: 100,

    // inherit docs
    minWidth: 200,

<span id='Ext-window.Window-cfg-expandOnShow'>    /**
</span>     * @cfg {Boolean} expandOnShow
     * True to always expand the window when it is displayed, false to keep it in its current state (which may be
     * {@link #collapsed}) when displayed (defaults to true).
     */
    expandOnShow: true,

    // inherited docs, same default
    collapsible: false,

<span id='Ext-window.Window-cfg-closable'>    /**
</span>     * @cfg {Boolean} closable
     * &lt;p&gt;True to display the 'close' tool button and allow the user to close the window, false to
     * hide the button and disallow closing the window (defaults to &lt;code&gt;true&lt;/code&gt;).&lt;/p&gt;
     * &lt;p&gt;By default, when close is requested by either clicking the close button in the header
     * or pressing ESC when the Window has focus, the {@link #close} method will be called. This
     * will &lt;i&gt;{@link Ext.Component#destroy destroy}&lt;/i&gt; the Window and its content meaning that
     * it may not be reused.&lt;/p&gt;
     * &lt;p&gt;To make closing a Window &lt;i&gt;hide&lt;/i&gt; the Window so that it may be reused, set
     * {@link #closeAction} to 'hide'.&lt;/p&gt;
     */
    closable: true,

<span id='Ext-window.Window-cfg-hidden'>    /**
</span>     * @cfg {Boolean} hidden
     * Render this Window hidden (default is &lt;code&gt;true&lt;/code&gt;). If &lt;code&gt;true&lt;/code&gt;, the
     * {@link #hide} method will be called internally.
     */
    hidden: true,

    // Inherit docs from Component. Windows render to the body on first show.
    autoRender: true,

    // Inherit docs from Component. Windows hide using visibility.
    hideMode: 'visibility',

<span id='Ext-window.Window-cfg-floating'>    /** @cfg {Boolean} floating @hide Windows are always floating*/
</span>    floating: true,

    ariaRole: 'alertdialog',
    
    itemCls: 'x-window-item',

    overlapHeader: true,
    
    ignoreHeaderBorderManagement: true,

    // private
    initComponent: function() {
        var me = this;
        me.callParent();
        me.addEvents(
<span id='Ext-window.Window-event-activate'>            /**
</span>             * @event activate
             * Fires after the window has been visually activated via {@link #setActive}.
             * @param {Ext.window.Window} this
             */
<span id='Ext-window.Window-event-deactivate'>            /**
</span>             * @event deactivate
             * Fires after the window has been visually deactivated via {@link #setActive}.
             * @param {Ext.window.Window} this
             */
<span id='Ext-window.Window-event-resize'>            /**
</span>             * @event resize
             * Fires after the window has been resized.
             * @param {Ext.window.Window} this
             * @param {Number} width The window's new width
             * @param {Number} height The window's new height
             */
            'resize',
<span id='Ext-window.Window-event-maximize'>            /**
</span>             * @event maximize
             * Fires after the window has been maximized.
             * @param {Ext.window.Window} this
             */
            'maximize',
<span id='Ext-window.Window-event-minimize'>            /**
</span>             * @event minimize
             * Fires after the window has been minimized.
             * @param {Ext.window.Window} this
             */
            'minimize',
<span id='Ext-window.Window-event-restore'>            /**
</span>             * @event restore
             * Fires after the window has been restored to its original size after being maximized.
             * @param {Ext.window.Window} this
             */
            'restore'
        );

        if (me.plain) {
            me.addClsWithUI('plain');
        }

        if (me.modal) {
            me.ariaRole = 'dialog';
        }
    },

    // State Management
    // private

    initStateEvents: function(){
        var events = this.stateEvents;
        // push on stateEvents if they don't exist
        Ext.each(['maximize', 'restore', 'resize', 'dragend'], function(event){
            if (Ext.Array.indexOf(events, event)) {
                events.push(event);
            }
        });
        this.callParent();
    },

    getState: function() {
        var me = this,
            state = me.callParent() || {},
            maximized = !!me.maximized;

        state.maximized = maximized;
        Ext.apply(state, {
            size: maximized ? me.restoreSize : me.getSize(),
            pos: maximized ? me.restorePos : me.getPosition()
        });
        return state;
    },

    applyState: function(state){
        var me = this;

        if (state) {
            me.maximized = state.maximized;
            if (me.maximized) {
                me.hasSavedRestore = true;
                me.restoreSize = state.size;
                me.restorePos = state.pos;
            } else {
                Ext.apply(me, {
                    width: state.size.width,
                    height: state.size.height,
                    x: state.pos[0],
                    y: state.pos[1]
                });
            }
        }
    },

    // private
    onMouseDown: function () {
        if (this.floating) {
            this.toFront();
        }
    },

    // private
    onRender: function(ct, position) {
        var me = this;
        me.callParent(arguments);
        me.focusEl = me.el;

        // Double clicking a header will toggleMaximize
        if (me.maximizable) {
            me.header.on({
                dblclick: {
                    fn: me.toggleMaximize,
                    element: 'el',
                    scope: me
                }
            });
        }
    },

    // private
    afterRender: function() {
        var me = this,
            hidden = me.hidden,
            keyMap;

        me.hidden = false;
        // Component's afterRender sizes and positions the Component
        me.callParent();
        me.hidden = hidden;

        // Create the proxy after the size has been applied in Component.afterRender
        me.proxy = me.getProxy();

        // clickToRaise
        me.mon(me.el, 'mousedown', me.onMouseDown, me);

        // Initialize
        if (me.maximized) {
            me.maximized = false;
            me.maximize();
        }

        if (me.closable) {
            keyMap = me.getKeyMap();
            keyMap.on(27, me.onEsc, me);
            keyMap.disable();
        }
    },

<span id='Ext-window.Window-method-initDraggable'>    /**
</span>     * @private
     * @override
     * Override Component.initDraggable.
     * Window uses the header element as the delegate.
     */
    initDraggable: function() {
        var me = this,
            ddConfig;

        if (!me.header) {
            me.updateHeader(true);
        }

        ddConfig = Ext.applyIf({
            el: me.el,
            delegate: '#' + me.header.id
        }, me.draggable);

        // Add extra configs if Window is specified to be constrained
        if (me.constrain || me.constrainHeader) {
            ddConfig.constrain = me.constrain;
            ddConfig.constrainDelegate = me.constrainHeader;
            ddConfig.constrainTo = me.constrainTo || me.container;
        }

<span id='Ext-window.Window-property-dd'>        /**
</span>         * &lt;p&gt;If this Window is configured {@link #draggable}, this property will contain
         * an instance of {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker})
         * which handles dragging the Window's DOM Element, and constraining according to the {@link #constrain}
         * and {@link #constrainHeader} .&lt;/p&gt;
         * &lt;p&gt;This has implementations of &lt;code&gt;onBeforeStart&lt;/code&gt;, &lt;code&gt;onDrag&lt;/code&gt; and &lt;code&gt;onEnd&lt;/code&gt;
         * which perform the dragging action. If extra logic is needed at these points, use
         * {@link Ext.Function#createInterceptor createInterceptor} or {@link Ext.Function#createSequence createSequence} to
         * augment the existing implementations.&lt;/p&gt;
         * @type Ext.util.ComponentDragger
         * @property dd
         */
        me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
        me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
    },

    // private
    onEsc: function(k, e) {
        e.stopEvent();
        this[this.closeAction]();
    },

    // private
    beforeDestroy: function() {
        var me = this;
        if (me.rendered) {
            delete this.animateTarget;
            me.hide();
            Ext.destroy(
                me.keyMap
            );
        }
        me.callParent();
    },

<span id='Ext-window.Window-method-addTools'>    /**
</span>     * @private
     * @override
     * Contribute class-specific tools to the header.
     * Called by Panel's initTools.
     */
    addTools: function() {
        var me = this;

        // Call Panel's initTools
        me.callParent();

        if (me.minimizable) {
            me.addTool({
                type: 'minimize',
                handler: Ext.Function.bind(me.minimize, me, [])
            });
        }
        if (me.maximizable) {
            me.addTool({
                type: 'maximize',
                handler: Ext.Function.bind(me.maximize, me, [])
            });
            me.addTool({
                type: 'restore',
                handler: Ext.Function.bind(me.restore, me, []),
                hidden: true
            });
        }
    },

<span id='Ext-window.Window-method-getFocusEl'>    /**
</span>     * Gets the configured default focus item.  If a {@link #defaultFocus} is set, it will receive focus, otherwise the
     * Container itself will receive focus.
     */
    getFocusEl: function() {
        var me = this,
            f = me.focusEl,
            defaultComp = me.defaultButton || me.defaultFocus,
            t = typeof db,
            el,
            ct;

        if (Ext.isDefined(defaultComp)) {
            if (Ext.isNumber(defaultComp)) {
                f = me.query('button')[defaultComp];
            } else if (Ext.isString(defaultComp)) {
                f = me.down('#' + defaultComp);
            } else {
                f = defaultComp;
            }
        }
        return f || me.focusEl;
    },

    // private
    beforeShow: function() {
        this.callParent();

        if (this.expandOnShow) {
            this.expand(false);
        }
    },

    // private
    afterShow: function(animateTarget) {
        var me = this,
            size;

        // Perform superclass's afterShow tasks
        // Which might include animating a proxy from an animTarget
        me.callParent(arguments);

        if (me.maximized) {
            me.fitContainer();
        }

        if (me.monitorResize || me.constrain || me.constrainHeader) {
            Ext.EventManager.onWindowResize(me.onWindowResize, me);
        }
        me.doConstrain();
        if (me.keyMap) {
            me.keyMap.enable();
        }
    },

    // private
    doClose: function() {
        var me = this;

        // immediate close
        if (me.hidden) {
            me.fireEvent('close', me);
            me[me.closeAction]();
        } else {
            // close after hiding
            me.hide(me.animTarget, me.doClose, me);
        }
    },

    // private
    afterHide: function() {
        var me = this;

        // No longer subscribe to resizing now that we're hidden
        if (me.monitorResize || me.constrain || me.constrainHeader) {
            Ext.EventManager.removeResizeListener(me.onWindowResize, me);
        }

        // Turn off keyboard handling once window is hidden
        if (me.keyMap) {
            me.keyMap.disable();
        }

        // Perform superclass's afterHide tasks.
        me.callParent(arguments);
    },

    // private
    onWindowResize: function() {
        if (this.maximized) {
            this.fitContainer();
        }
        this.doConstrain();
    },

<span id='Ext-window.Window-method-minimize'>    /**
</span>     * Placeholder method for minimizing the window.  By default, this method simply fires the {@link #minimize} event
     * since the behavior of minimizing a window is application-specific.  To implement custom minimize behavior,
     * either the minimize event can be handled or this method can be overridden.
     * @return {Ext.window.Window} this
     */
    minimize: function() {
        this.fireEvent('minimize', this);
        return this;
    },

    afterCollapse: function() {
        var me = this;

        if (me.maximizable) {
            me.tools.maximize.hide();
            me.tools.restore.hide();
        }
        if (me.resizer) {
            me.resizer.disable();
        }
        me.callParent(arguments);
    },

    afterExpand: function() {
        var me = this;

        if (me.maximized) {
            me.tools.restore.show();
        } else if (me.maximizable) {
            me.tools.maximize.show();
        }
        if (me.resizer) {
            me.resizer.enable();
        }
        me.callParent(arguments);
    },

<span id='Ext-window.Window-method-maximize'>    /**
</span>     * Fits the window within its current container and automatically replaces
     * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button.
     * Also see {@link #toggleMaximize}.
     * @return {Ext.window.Window} this
     */
    maximize: function() {
        var me = this;

        if (!me.maximized) {
            me.expand(false);
            if (!me.hasSavedRestore) {
                me.restoreSize = me.getSize();
                me.restorePos = me.getPosition(true);
            }
            if (me.maximizable) {
                me.tools.maximize.hide();
                me.tools.restore.show();
            }
            me.maximized = true;
            me.el.disableShadow();

            if (me.dd) {
                me.dd.disable();
            }
            if (me.collapseTool) {
                me.collapseTool.hide();
            }
            me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
            me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');

            me.setPosition(0, 0);
            me.fitContainer();
            me.fireEvent('maximize', me);
        }
        return me;
    },

<span id='Ext-window.Window-method-restore'>    /**
</span>     * Restores a {@link #maximizable maximized}  window back to its original
     * size and position prior to being maximized and also replaces
     * the 'restore' tool button with the 'maximize' tool button.
     * Also see {@link #toggleMaximize}.
     * @return {Ext.window.Window} this
     */
    restore: function() {
        var me = this,
            tools = me.tools;

        if (me.maximized) {
            delete me.hasSavedRestore;
            me.removeCls(Ext.baseCSSPrefix + 'window-maximized');

            // Toggle tool visibility
            if (tools.restore) {
                tools.restore.hide();
            }
            if (tools.maximize) {
                tools.maximize.show();
            }
            if (me.collapseTool) {
                me.collapseTool.show();
            }

            // Restore the position/sizing
            me.setPosition(me.restorePos);
            me.setSize(me.restoreSize);

            // Unset old position/sizing
            delete me.restorePos;
            delete me.restoreSize;

            me.maximized = false;

            me.el.enableShadow(true);

            // Allow users to drag and drop again
            if (me.dd) {
                me.dd.enable();
            }

            me.container.removeCls(Ext.baseCSSPrefix + 'window-maximized-ct');

            me.doConstrain();
            me.fireEvent('restore', me);
        }
        return me;
    },

<span id='Ext-window.Window-method-toggleMaximize'>    /**
</span>     * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized
     * state of the window.
     * @return {Ext.window.Window} this
     */
    toggleMaximize: function() {
        return this[this.maximized ? 'restore': 'maximize']();
    }

<span id='Ext-window.Window-cfg-autoWidth'>    /**
</span>     * @cfg {Boolean} autoWidth @hide
     * Absolute positioned element and therefore cannot support autoWidth.
     * A width is a required configuration.
     **/
});</pre></pre></body></html>